<!DOCTYPE html>
<!--
/**
 * Copyright (c) 2006, Opera Software ASA
 * All rights reserved.
 * Redistribution and use in source and binary forms, with or without
 * modification, are permitted provided that the following conditions are met:
 *
 *     * Redistributions of source code must retain the above copyright
 *       notice, this list of conditions and the following disclaimer.
 *     * Redistributions in binary form must reproduce the above copyright
 *       notice, this list of conditions and the following disclaimer in the
 *       documentation and/or other materials provided with the distribution.
 *     * Neither the name of Opera Software ASA nor the
 *       names of its contributors may be used to endorse or promote products
 *       derived from this software without specific prior written permission.
 *
 * THIS SOFTWARE IS PROVIDED BY OPERA SOFTWARE ASA AND CONTRIBUTORS ``AS IS'' AND ANY
 * EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE IMPLIED
 * WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE ARE
 * DISCLAIMED. IN NO EVENT SHALL OPERA SOFTWARE ASA AND CONTRIBUTORS BE LIABLE FOR ANY
 * DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES
 * (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES;
 * LOSS OF USE, DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND
 * ON ANY THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT
 * (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE OF THIS
 * SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
 */
 -->
<html>
<head>
<title> </title>
<style type='text/css'>

body {
  margin:0;
  padding:0;
  height:100%;
  background-color:#666;
  }
h1 {
  margin-left:1em;
  }
div {
  height:40px;
  width:40px;
  background-color:#006;
  position:absolute;
  cursor:pointer;
  left:10%;
  top:90%;
  margin-left:-40px;
  }
</style>
<script  type='text/javascript' src='../../animation.js' ></script>
<script type='text/javascript'>
onload=function()
{
  if(!document.documentElement.createAnimation)
  {
    HTMLElement.activate();
  }
  var animation=document.getElementsByTagName('div')[0].createAnimation();
  
  animation.accelerationProfile=animation.sine; 
  animation.style.height='40px';
  animation.clickBehavior=function()
  {
    if(this.style.height=='400px')
    {
      this.addAnimation('left','90%','10%');
      this.addAnimation('top','10%','90%');
      this.addAnimation('marginLeft','-400px','-40px');
      this.addAnimation('height','400px','40px');
      this.addAnimation('width','400px', '40px');
      this.addAnimation('backgroundColor','#99f', '#006');
      this.run();
    }
    else
    {
      this.addAnimation('left','10%','90%');
      this.addAnimation('top','90%','10%');
      this.addAnimation('marginLeft','-40px','-400px');
      this.addAnimation('height','40px','400px');
      this.addAnimation('width','40px', '400px');
      this.addAnimation('backgroundColor','#006', '#99f');
      this.run();
    }
  }
  animation.element.onclick=function(){animation.clickBehavior()};
}
//document.addEventListener('OWanimationfinish', function(ev){alert(ev.data)}, false);
</script>
</head>
<body>
<h1>Animation Library: Basics</h1>
<div></div>
 <p style="position: absolute; bottom: 1em; right: 1em; border: 1px dotted red; background: infobackground; z-index: -1; padding: .4em;">
  This demo is made with the <a href="../../animation.js">Opera animation library</a>.
 </p>
</body>
</html>